<template>
  <header>
    <el-row
      style="width: 100%"
      type="flex"
      justify="space-between"
      align="middle"
      :gutter="10"
    >
      <el-col :span="5">
        <div class="startTime" v-if="startTimeShow">
          <p>湛江海关风险防控分局</p>
          <p class="time" ref="time"></p>
        </div>
      </el-col>

      <el-col style="text-align: center" :span="14">
        <span class="pageTitle">
          {{ title }}
          <!-- <span class="customsName">({{ custom }})</span> -->
        </span>
      </el-col>

      <el-col
        class="optionWrap"
        :span="5"
      >
        <el-button
          v-if="user.role.roleId != '0'"
          type="primary"
          icon="el-icon-folder-add"
          plain
          circle
          @click="dialogFormVisible = true"
        ></el-button>
        <div style="width:40px" v-if="user.role.roleId == '0'"></div>
        <div class="userMsg">
          <div @click="toUserManage">
            <el-tooltip placement="bottom" :content="user.userName">
              <el-avatar
                :src="user.avatar ? user.avatar : circleUrl"
                :alt="user.userName"
              ></el-avatar>
            </el-tooltip>
          </div>
          <span class="loginOut">|</span>
          <span class="loginOut" @click="loginOut">退出</span>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="添加面板" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="面板标题" label-width="120px">
          <el-input
            v-model="panelTitle"
            placeholder="输入面板标题"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="面板位置" label-width="120px">
          <el-select v-model="panelPosition" placeholder="输入面板位置">
            <el-option
              v-for="item in positionSelect"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPanelHandle"> 确 定 </el-button>
      </div>
    </el-dialog>
  </header>
</template>
<script>
let t = null;
const positionSelect = [
  { name: "左", value: "left" },
  { name: "中", value: "center" },
  { name: "右", value: "right" },
];
export default {
  props: {
    title: {
      type: String,
      default: "入境船舶疫情防控动态预警系统",
    },
    custom: {
      type: String,
      default: "湛江海关",
    },
    startTime: {
      type: String,
      default: "2020年1月1日起",
    },
    startTimeShow: {
      type: Boolean,
      default: true,
    },
  },
  components: {},
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      user: "",
      systemPagePath: "",
      dialogFormVisible: false,
      panelTitle: undefined,
      positionSelect,
      panelPosition: "left",
      styleObject: {
       "justifyContent":"flex-end"
      },
    };
  },
  watch: {},
  created() {
    this.getUserInfo();
    this.systemPagePath = this.getPathSubSystemPath();
  },
  mounted() {
    t = setTimeout(this.time, 1000); //開始运行
  },
  methods: {
    addPanelHandle() {
      this.$emit("addPanel", {
        title: this.panelTitle,
        position: this.panelPosition,
      });
      setTimeout(() => {
        this.dialogFormVisible = false;
      }, 1500);
    },
    // 获取子系统sysemPagePath
    getPathSubSystemPath() {
      const path = window.location.pathname;
      const subpath = path.split("/")[1];
      return subpath || "ship";
    },
    time() {
      clearTimeout(t); //清除定时器
      let dt = new Date();
      if (this.$refs.time) {
        this.$refs.time.innerHTML = this.formatDate(dt);
      }
      t = setTimeout(this.time, 1000); //设定定时器，循环运行
    },
    formatDate(time) {
      let dt = time;
      let y = dt.getFullYear();
      let mt = ("0" + (dt.getMonth() + 1)).slice(-2);
      let day = ("0" + dt.getDate()).slice(-2);
      let h = ("0" + dt.getHours()).slice(-2); //获取时
      let m = ("0" + dt.getMinutes()).slice(-2); //获取分
      let s = ("0" + dt.getSeconds()).slice(-2); //获取秒
      return y + "-" + mt + "-" + day + " " + h + ":" + m + ":" + s;
    },
    toUserManage() {
      this.$router.push({ path: "/userManage/personalMsg" });
    },
    getUserInfo() {
      let ts = this;
      ts.$http({
        method: "GET",
        url: ts.portInterface.getUserInfo,
        params: {
          userId: localStorage.getItem("userId"),
        },
      })
        .then((response) => {
          if (response.data.code == 200) {
            this.$store.commit("setUserInfo", response.data.result);
            this.user = response.data.result;
          } else {
            ts.$message({
              showClose: true,
              message: response.data.message,
              type: "error",
            });
          }
        })
        .catch((error) => {
          ts.$message({
            showClose: true,
            message: error,
            type: "error",
          });
        });
    },
    loginOut() {
      // 清空本地token
      localStorage.setItem("token", ""),
        // 跳到登录页
        this.$router.push({
          name: "login",
        });
    },
  },
};
</script>
<style lang="less" scoped>
.optionWrap {
  display: flex;
  justify-content: space-around;
}

.userMsg {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .loginOut {
    padding: 5px;
    vertical-align: middle;
  }
  span {
    font-size: 0.25rem;
    color: #208ba8;
  }
}
@media screen and (max-width: 1200px) {
  .userMsg {
    span {
      font-size: 0.6rem;
    }
  }
}
</style>
